@mixin transition($v) {
  transition: $v;
}
@mixin boxShadow($v) {
  box-shadow: $v;
}
@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*3.4 表单
  name:      hui-form
  example:
  explain:
*/

/*3.4.1 input,textarea 文本域 文本区域*/
/*默认状态*/
.hui-input-text,
.hui-textarea {
  box-sizing: border-box;
  border: solid 1px #ddd;
  width: 100%;
  @include transition(all 0.2s linear 0s);
  padding: 5px 10px;
}

.hui-textarea {
  height: 100px;
  resize: none;
  font-size: 14px;
  word-break: break-all;
}

.hui-textarea-numberbar {
  position: absolute;
  right: 20px;
  bottom: 5px;
  z-index: 1;
  margin-bottom: 0;
}

.hui-textarea-length {
  font-style: normal;
}

.hui-input-text:hover,
.hui-textarea:hover {
  border: solid 1px #3bb4f2;
}

/*得到焦点后*/
.hui-input-text.focus,
.hui-textarea.focus {
  border: solid 1px #0f9ae0 \9;
  border-color: rgba(82, 168, 236, 0.8);
  @include boxShadow('0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)');
}
/*不可点击*/
.hui-input-text.disabled,
.hui-textarea.disabled,
.hui-input-text.disabled.focus,
.hui-textarea.disabled.focus {
  background-color: #ededed;
  cursor: default;
  border-color: #ddd;
  @include boxShadow(inset 0 2px 2px #e8e7e7);
}
/*只读状态*/
.hui-input-text.disabled,
.hui-textarea.disabled {
  background-color: #e6e6e6;
  cursor: default;
}

/*阴影*/
.hui-input-text.box-shadow,
.hui-textarea.box-shadow {
  @include boxShadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
}

/*行内元素*/
.hui-input-text.inline {
  display: inline-block;
  width: auto;
}

/*3.4.2 checkbox radio  单选 多选
  example:
    <div class="skin-minimal">
      <div class="check-box">
        <input type="checkbox" id="checkbox-1">
        <label for="checkbox-1">复选框</label>
      </div>
    </div>

    <div class="skin-minimal">
      <div class="radio-box">
        <input type="radio" id="minimal-radio-1" name="demo-radio1">
        <label for="minimal-radio-1">单选按钮</label>
      </div>
    </div>
  explain:
*/

input[type="radio"],
input[type="checkbox"] {
    line-height: normal;
    margin-top: -4px;
}
.check-box,
.radio-box {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  padding-right: 20px;
}

.icheckbox,
.icheckbox-red,
.icheckbox-green,
.icheckbox-blue,
.icheckbox-aero,
.icheckbox-grey,
.icheckbox-orange,
.icheckbox-yellow,
.icheckbox-pink,
.icheckbox-purple,
.iradio,
.iradio-red,
.iradio-green,
.iradio-blue,
.iradio-aero,
.iradio-grey,
.iradio-orange,
.iradio-yellow,
.iradio-pink,
.iradio-purple {
  position: absolute;
  top: 4px;
  left: 0;
}

@media (max-width: 767px) {
  .responsive .check-box,
  .responsive .radio-box {
    display: block
  }
}


/*3.4.2.1 jQuery.icheck.css*/

/* iCheck.js Minimal skin
----------------------------------- */
.icheckbox,
.iradio {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/minimal.png) no-repeat;
  border: none;
  cursor: pointer
}

.icheckbox{
  background-position: 0 0;
  &.static:hover {
    background-position: 0 0;
  }
  &.hover,
  &:hover {
    background-position: -20px 0;
  }
  &.checked {
    background-position: -40px 0;
  }
  &.disabled {
    background-position: -60px 0;
    cursor: default
  }
  &.checked.disabled {
    background-position: -80px 0;
  }
}


.iradio{
  background-position: -100px 0;
  &.static:hover {
    background-position: -100px 0;
  }
  &.hover,
  &:hover {
    background-position: -120px 0
  }
  &.checked {
    background-position: -140px 0
  }
  &.disabled {
    background-position: -160px 0;
    cursor: default
  }
  &.checked.disabled {
    background-position: -180px 0
  }
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox,
  .iradio {
    background-image: url(../images/iCheck/minimal@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}

/* red */
.icheckbox-red,
.iradio-red {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/red.png) no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox-red,
.icheckbox-red.static:hover {
  background-position: 0 0;
}

.icheckbox-red.hover,
.icheckbox-red:hover {
  background-position: -20px 0;
}

.icheckbox-red.checked {
  background-position: -40px 0;
}

.icheckbox-red.disabled {
  background-position: -60px 0;
  cursor: default;
}

.icheckbox-red.checked.disabled {
  background-position: -80px 0;
}

.iradio-red,
.iradio-red.static:hover {
  background-position: -100px 0;
}

.iradio-red.hover,
.iradio-red:hover {
  background-position: -120px 0;
}

.iradio-red.checked {
  background-position: -140px 0;
}

.iradio-red.disabled {
  background-position: -160px 0;
  cursor: default;
}

.iradio-red.checked.disabled {
  background-position: -180px 0;
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-red,
  .iradio-red {
    background-image: url(../images/iCheck/red@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}

/* green */
.icheckbox-green,
.iradio-green {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/green.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox-green,
.icheckbox-green.static:hover {
  background-position: 0 0;
}

.icheckbox-green.hover,
.icheckbox-green:hover {
  background-position: -20px 0;
}

.icheckbox-green.checked {
  background-position: -40px 0;
}

.icheckbox-green.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-green.checked.disabled {
  background-position: -80px 0;
}

.iradio-green,
.iradio-green.static:hover {
  background-position: -100px 0;
}

.iradio-green.hover,
.iradio-green:hover {
  background-position: -120px 0;
}

.iradio-green.checked {
  background-position: -140px 0;
}

.iradio-green.disabled {
  background-position: -160px 0;
  cursor: default;
}

.iradio-green.checked.disabled {
  background-position: -180px 0;
}

/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-green,
  .iradio-green {
    background-image: url(../images/iCheck/green@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}


/* blue */
.icheckbox-blue,
.iradio-blue {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/blue.png) no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox-blue,
.icheckbox-blue.static:hover {
  background-position: 0 0;
}

.icheckbox-blue.hover,
.icheckbox-blue:hover {
  background-position: -20px 0;
}

.icheckbox-blue.checked {
  background-position: -40px 0;
}

.icheckbox-blue.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-blue.checked.disabled {
  background-position: -80px 0;
}

.iradio-blue,
.iradio-blue.static:hover {
  background-position: -100px 0;
}

.iradio-blue.hover,
.iradio-blue:hover {
  background-position: -120px 0;
}

.iradio-blue.checked {
  background-position: -140px 0;
}

.iradio-blue.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-blue.checked.disabled {
  background-position: -180px 0;
}

/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-blue,
  .iradio-blue {
    background-image: url(../images/iCheck/blue@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}


/* aero */
.icheckbox-aero,
.iradio-aero {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/aero.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox-aero,
.icheckbox-aero.static:hover {
  background-position: 0 0;
}
.icheckbox-aero.hover,
.icheckbox-aero:hover {
  background-position: -20px 0;
}
.icheckbox-aero.checked {
  background-position: -40px 0;
}
.icheckbox-aero.disabled {
  background-position: -60px 0;
  cursor: default;
}
.icheckbox-aero.checked.disabled {
  background-position: -80px 0;
}
.iradio-aero,
.iradio-aero.static:hover {
  background-position: -100px 0;
}
.iradio-aero.hover,
.iradio-aero:hover {
  background-position: -120px 0;
}

.iradio-aero.checked {
  background-position: -140px 0;
}

.iradio-aero.disabled {
  background-position: -160px 0;
  cursor: default;
}

.iradio-aero.checked.disabled {
  background-position: -180px 0;
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-aero,
  .iradio-aero {
    background-image: url(../images/iCheck/aero@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}

/* grey */
.icheckbox-grey,
.iradio-grey {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/grey.png) no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox-grey,
.icheckbox-grey.static:hover {
  background-position: 0 0
}

.icheckbox-grey.hover,
.icheckbox-grey:hover {
  background-position: -20px 0
}

.icheckbox-grey.checked {
  background-position: -40px 0
}

.icheckbox-grey.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-grey.checked.disabled {
  background-position: -80px 0
}

.iradio-grey,
.iradio-grey.static:hover {
  background-position: -100px 0
}

.iradio-grey.hover,
.iradio-grey:hover {
  background-position: -120px 0
}

.iradio-grey.checked {
  background-position: -140px 0
}

.iradio-grey.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-grey.checked.disabled {
  background-position: -180px 0
}


/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-grey,
  .iradio-grey {
    background-image: url(../images/iCheck/grey@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px
  }
}


/* orange */

.icheckbox-orange,
.iradio-orange {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/orange.png) no-repeat;
  border: none;
  cursor: pointer
}

.icheckbox-orange,
.icheckbox-orange.static:hover {
  background-position: 0 0
}

.icheckbox-orange.hover,
.icheckbox-orange:hover {
  background-position: -20px 0
}

.icheckbox-orange.checked {
  background-position: -40px 0
}

.icheckbox-orange.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-orange.checked.disabled {
  background-position: -80px 0
}

.iradio-orange,
.iradio-orange.static:hover {
  background-position: -100px 0
}

.iradio-orange.hover,
.iradio-orange:hover {
  background-position: -120px 0
}

.iradio-orange.checked {
  background-position: -140px 0
}

.iradio-orange.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-orange.checked.disabled {
  background-position: -180px 0
}


/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-orange,
  .iradio-orange {
    background-image: url(../images/iCheck/orange@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px
  }
}


/* yellow */

.icheckbox-yellow,
.iradio-yellow {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/yellow.png) no-repeat;
  border: none;
  cursor: pointer
}

.icheckbox-yellow,
.icheckbox-yellow.static:hover {
  background-position: 0 0
}

.icheckbox-yellow.hover,
.icheckbox-yellow:hover {
  background-position: -20px 0
}

.icheckbox-yellow.checked {
  background-position: -40px 0
}

.icheckbox-yellow.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-yellow.checked.disabled {
  background-position: -80px 0
}

.iradio-yellow,
.iradio-yellow.static:hover {
  background-position: -100px 0
}

.iradio-yellow.hover,
.iradio-yellow:hover {
  background-position: -120px 0
}

.iradio-yellow.checked {
  background-position: -140px 0
}

.iradio-yellow.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-yellow.checked.disabled {
  background-position: -180px 0
}


/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-yellow,
  .iradio-yellow {
      background-image: url(../images/iCheck/yellow@2x.png);
      -webkit-background-size: 200px 20px;
      background-size: 200px 20px
  }
}


/* pink */

.icheckbox-pink,
.iradio-pink {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/pink.png) no-repeat;
  border: none;
  cursor: pointer
}

.icheckbox-pink,
.icheckbox-pink.static:hover {
  background-position: 0 0
}

.icheckbox-pink.hover,
.icheckbox-pink:hover {
  background-position: -20px 0
}

.icheckbox-pink.checked {
  background-position: -40px 0
}

.icheckbox-pink.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-pink.checked.disabled {
  background-position: -80px 0
}

.iradio-pink,
.iradio-pink.static:hover {
  background-position: -100px 0
}

.iradio-pink.hover,
.iradio-pink:hover {
  background-position: -120px 0
}

.iradio-pink.checked {
  background-position: -140px 0
}

.iradio-pink.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-pink.checked.disabled {
  background-position: -180px 0
}


/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-pink,
  .iradio-pink {
      background-image: url(../images/iCheck/pink@2x.png);
      -webkit-background-size: 200px 20px;
      background-size: 200px 20px
  }
}


/* purple */

.icheckbox-purple,
.iradio-purple {
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../images/iCheck/purple.png) no-repeat;
  border: none;
  cursor: pointer
}

.icheckbox-purple,
.icheckbox-purple.static:hover {
  background-position: 0 0
}

.icheckbox-purple.hover,
.icheckbox-purple:hover {
  background-position: -20px 0
}

.icheckbox-purple.checked {
  background-position: -40px 0
}

.icheckbox-purple.disabled {
  background-position: -60px 0;
  cursor: default
}

.icheckbox-purple.checked.disabled {
  background-position: -80px 0
}

.iradio-purple,
.iradio-purple.static:hover {
  background-position: -100px 0
}

.iradio-purple.hover,
.iradio-purple:hover {
  background-position: -120px 0
}

.iradio-purple.checked {
  background-position: -140px 0
}

.iradio-purple.disabled {
  background-position: -160px 0;
  cursor: default
}

.iradio-purple.checked.disabled {
  background-position: -180px 0
}


/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox-purple,
  .iradio-purple {
      background-image: url(../images/iCheck/purple@2x.png);
      -webkit-background-size: 200px 20px;
      background-size: 200px 20px
  }
}


/*3.4.3 Bootsrtap.Switch.css*/
.has-switch {
  display: inline-block;
  cursor: pointer;
  @include borderRadius(5px);
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  -ms-user-select: none;
  user-select: none;
  min-width: 100px;
  &.size-MINI {
      min-width: 72px
  }
  &.size-S {
      min-width: 80px
  }
  &.size-L {
      min-width: 120px
  }
  &.deactivate {
      opacity: .5;
      filter: alpha(opacity=50);
      cursor: default!important;
      label,
      span {
          cursor: default!important
      }
  }
  > div {
      display: inline-block;
      width: 150%;
      position: relative;
      top: 0;
      &.switch-animate {
          -ms-transition: left .5s;
          transition: left .5s
      }
      &.switch-off {
          left: -50%
      }
      &.switch-on {
          left: 0
      }
  }
  input[type=checkbox] {
      display: none
  }
  span,
  label {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 20px;
    &.size-MINI {
      padding-bottom: 4px;
      padding-top: 4px;
      font-size: 10px;
      line-height: 9px;
    }
    &.size-S {
      padding-bottom: 3px;
      padding-top: 3px;
      font-size: 12px;
      line-height: 18px;
    }
    &.size-L {
      padding-bottom: 9px;
      padding-top: 9px;
      font-size: 16px;
      line-height: normal;
    }
  }
  label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    width: 34%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.disabled,
    &[disabled] {
      color: #fff;
      background-color: #e6e6e6;
      *background-color: #d9d9d9;
    }
    &:active,
    &.active {
      background-color: #ccc \9;
    }
    i {
      color: #000;
      text-shadow: 0 1px 0 #fff;
      line-height: 18px;
      pointer-events: none
    }
  }
  span {
      text-align: center;
      z-index: 1;
      width: 33%;
      &.switch-left {
          -ms-border-radius-topleft: 4px;
          border-top-left-radius: 4px;
          -ms-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px
      }
      &.switch-right {
          color: #333;
          text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
          background-color: #f0f0f0;
          background-image: -moz-linear-gradient(top, #e6e6e6, #fff);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff));
          background-image: -webkit-linear-gradient(top, #e6e6e6, #fff);
          background-image: -o-linear-gradient(top, #e6e6e6, #fff);
          background-image: linear-gradient(to bottom, #e6e6e6, #fff);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
          border-color: #fff #fff #d9d9d9;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #fff;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #333;
              background-color: #fff;
              *background-color: #f2f2f2;
          }
          &:active,
          &.active {
              background-color: #e6e6e6 \9;
          }
      }
          
      &.switch-primary,
      &.switch-left {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #005fcc;
          background-image: -moz-linear-gradient(top, #04c, #08c);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04c), to(#08c));
          background-image: -webkit-linear-gradient(top, #04c, #08c);
          background-image: -o-linear-gradient(top, #04c, #08c);
          background-image: linear-gradient(to bottom, #04c, #08c);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0);
          border-color: #08c #08c #005580;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #08c;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #08c;
              *background-color: #0077b3;
          }
          &:active,
          &.active {
              background-color: #069 \9;
          }
      }

      &.switch-info {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #41a7c5;
          background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de));
          background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: -o-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0);
          border-color: #5bc0de #5bc0de #28a1c5;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #5bc0de;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #5bc0de;
              *background-color: #46b8da;
          }
          &:active,
          &.active {
              background-color: #31b0d5 \9
          }
      }
      
      
      &.switch-success {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #58b058;
          background-image: -moz-linear-gradient(top, #51a351, #62c462);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462));
          background-image: -webkit-linear-gradient(top, #51a351, #62c462);
          background-image: -o-linear-gradient(top, #51a351, #62c462);
          background-image: linear-gradient(to bottom, #51a351, #62c462);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0);
          border-color: #62c462 #62c462 #3b9e3b;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #62c462;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #62c462;
              *background-color: #4fbd4f
          }
          &:active,
          &.active {
              background-color: #42b142 \9;
          }
      }
      &.switch-warning {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #f9a123;
          background-image: -moz-linear-gradient(top, #f89406, #fbb450);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
          background-image: -webkit-linear-gradient(top, #f89406, #fbb450);
          background-image: -o-linear-gradient(top, #f89406, #fbb450);
          background-image: linear-gradient(to bottom, #f89406, #fbb450);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0);
          border-color: #fbb450 #fbb450 #f89406;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #fbb450;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #fbb450;
              *background-color: #faa937
          }
          &:active,
          &.active {
              background-color: #fa9f1e \9
          }
      }
      &.switch-danger {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #d14641;
          background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b));
          background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: -o-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0);
          border-color: #ee5f5b #ee5f5b #e51d18;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #ee5f5b;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #ee5f5b;
              *background-color: #ec4844;
          }
          &:active,
          &.active {
              background-color: #e9322d \9;
          }
      }
  }
}

/*3.4.4 select 下拉框
<span class="hui-select-box">
  <select class="hui-select" size="1" name="demo">
    <option value="1" selected>默认</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>
Explain:
select 是表单元素中最难美化的一个，有两种美化方式：
  1、修改源生的，修改有限，只能修改个边框，背景，字体。优点：程序方便操作；缺点：丑，浏览器之间存在很大差异。
  2、将源生的隐藏掉，用其他元素（如div li）通过js模拟下拉交互，然后再传值给源生的select。优点：好看，兼容好；缺点：代码冗余，依赖JS，不方便操作
*/


/*方法一、修改源生*/
.hui-select {
  border: solid 1px #ddd;
  box-sizing: border-box;
  cursor: pointer;
  line-height: normal;
  font-weight: normal;
  width: 100%;
  white-space: nowrap;
  font-size: 14px;
}
.hui-select-box {
  border: solid 1px #ddd;
  box-sizing: border-box;
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  padding: 4px 5px;
  .hui-select {
    border: none;
  }
  &.inline,
  &.inline .select {
    width: auto;
  }
  &.size-M {
    padding: 4px 5px;
    .hui-select {
      font-size: 14px;
    }
  }
  &.size-MINI {
    padding: 0px 5px;
    .hui-select {
      font-size: 12px;
    }
  }
  &.size-S {
    padding: 3px 5px;
    .hui-select {
      font-size: 12px;
    }
  }
  &.size-L {
    padding: 8px 5px;
    .hui-select {
      font-size: 16px;
    }
  }
  &.size-XL {
    padding: 10px 5px;
    .hui-select {
      font-size: 18px;
    }
  }
}

@media (max-width: 767px) {
  .responsive{
    .hui-select-box {
      border: none;
    }
    .hui-select-box .hui-select,
    .select {
      border: solid 1px #ddd;
      padding: 10px;
      font-size: 16px;
    }
    .hui-select-box,
    .hui-select-box.size-M,
    .hui-select-box.size-MINI,
    .hui-select-box.size-S,
    .hui-select-box.size-L,
    .hui-select-box.size-XL {
      height: auto;
      padding: 0;
    }
  }
}


/*方法二、JS模拟
<select name="demo" data-enabled="false">
  <option value="1" selected>默认</option>
  <option value="2">菜单二</option>
  <option value="3">菜单三</option>
</select>
需要引用2个js文件
<script type="text/javascript" src="lib/squid.js"></script>
<script type="text/javascript" src="lib/jselect-1.0.js"></script>
页面调用方法
<script type="text/javascript">
squid.swing.jselect()
</script>
*/

.hui-select-wrapper {
  position: relative;
  display: inline-block;
  font-size: 14px;
  cursor: default
}

.hui-select-default {
  zoom: 1;
  display: block;
  padding-left: 10px;
  padding-right: 30px;
  background-color: #fff;
  border: solid 1px #d0d0d0;
  height: 34px;
  line-height: 34px;
}

.jsselect.radius {
  overflow: visible;
  .select-default {
    @include borderRadius(4px);
  }
  .select-list {
    @include borderRadius(4px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.select-icon {
  position: absolute;
  height: 8px;
  width: 12px;
  right: 10px;
  top: 50%;
  margin-top: -4px;
  background: url(../images/jselect/iconpic-arrow-down2.png) no-repeat center
}

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  line-height: 34px;
  max-height: 320px;
  overflow: auto;
  background-color: #fff;
  background-clip: padding-box;
  @include boxShadow(0 1px 2px rgba(0, 1, 1, 0.2));
  box-sizing: border-box;
  border: solid 1px #d0d0d0;
  .select-item {
    margin: 0;
    padding: 0;
    .selected {
      background-color: #148cf1;
      color: #fff;
    }
  }
  .select-option {
    background: #fff;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 10px;
  }
}

/*3.4.5 文件上传
name:        hui-upload
example:
<span class="hui-upload">
  <a style="z-index:2;" href="javascript:void();" class="hui-btn hui-btn-primary radius">
    <i class="iconfont">&#xf0020;</i> 浏览文件
    <input type="file" multiple name="file_0" class="input-file">
  </a>
</span>
Explain：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。
*/
.hui-upload {
  position: relative;
  display: inline-block;
  height: 31px;
  *display: inline;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  .upload-url {
    cursor: pointer;
    width: 300px;
  }
  .input-file {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 30em;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  .icon-add,
  .icon-minus {
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 30px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    vertical-align: middle;
    width: 36px
  }
}

.hui-form-group .upload-btn {
  margin-left: -1px
}

@media (max-width: 767px) {
  .upload-btn {
    display: none;
  }
  .upload-url {
    display: none;
  }
}

/*3.4.6 hui-input-number 数字输入框*/
.hui-input-number {
  display: block;
  overflow: hidden;
  width: 100px;
  position: relative;
  padding-left: 29px;
  padding-right: 29px;
  .hui-input-text {
      height: 30px;
      text-align: center;
      width: 100%
  }
  a {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      height: 28px;
      line-height: 28px;
      width: 28px;
      cursor: pointer;
      outline: 0;
      text-decoration: none;
      text-align: center;
      font-size: 16px;
      border: 1px solid #ddd;
      background-color: #f7f7f7;
      &:hover {
        text-decoration: none
      }
      i {
        font-style: normal;
      }
      &.decrease {
        left: 0
      }
      &.add {
        right: 0
      }
      &.add.disabled,
      &.decrease.disabled {
        color: #999;
        cursor: not-allowed
      }
  }
}

/*3.4.7 邮箱提示*/
.emailSug-wrapper {
  position: absolute;
  background: #fff;
  text-align: left;
  .emailSug-list .emailSug-item {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    color: #333;
    &.active {
      background: #5a98de;
      cursor: pointer;
      color: #fff;
    }
  }
}

/*3.4.8 表单布局*/
.hui-form {
  legend {
    font-size: 20px;
  }
  .hui-row {
    margin-top: 15px;
  }
  .hui-form-item {
    .hui-form-item-label {
      display: block;
      color: #555;
      margin-top: 3px;
      cursor: text;
      text-align: right;
    }
    .hui-form-item-control {
      position: relative;
      > * {
        vertical-align: middle
      }
    }
  }
}

@media (max-width: 767px) {
  .hui-form-horizontal .hui-form-item-label {
    text-align: left;
  }
}

.placeholder {
  position: absolute;
  left: 4px;
  top: 4px;
  color: #c6c6c6;
  cursor: text;
  font-size: 14px;
}

/*设置placeholder颜色*/
/* Internet Explorer 10+ */
::-ms-input-placeholder {
  color: #b3b3b3
}
/*不兼容placeholder属性的浏览器，可使用<span class="placeholder">表单默认值</span>*/

.placeholder {
  color: #adb0be;
  position: absolute;
  z-index: 9
}

/*3.4.9 表单验证*/
/*文本框的错误状态*/
input.error,
select.error,
textarea.error {
  background-color: #fbe2e2;
  border-color: #c66161;
  color: #c00;
}
label.error {
  position: absolute;
  right: 18px;
  top: 5px;
  color: #ef392b;
  font-size: 12px;
}
.check-box label.error,
.radio-box label.error {
  right: auto;
  width: 150px;
  left: 210px;
  top: -2px;
}

/*密码等级*/
.passwordStrength{
  b {
    font-weight: 400;
  }
  b,
  span {
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
    line-height: 18px\9;
    height: 16px;
  }
  span {
    width: 57px;
    text-align: center;
    background-color: #d0d0d0;
    border-right: 1px solid #fff;
  }
  .last {
      border-right: none;
  }
  .bgStrength {
    color: #fff;
    background-color: #fcc900;
  }
}
